DAY3 學習CSS，打造美觀網頁

2024 iThome 鐵人賽

DAY 3

佛心分享-SideProject30

新手開發日記：跟著ChatGPT做記帳網頁系列第 3 篇

16th鐵人賽

禮記是Lizzy

2024-09-17 00:30:16

115 瀏覽

分享至

今天的目標是學習CSS（階層樣式表）基本概念與應用。CSS可以用來控制網頁的樣式和佈局，設計更吸引人的介面以美化網頁。

CSS的基礎

CSS的作用在於對HTML元素進行樣式設計，可以控制文字的顏色、字體、排版等視覺屬性。例如（嵌入式CSS）：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: white;
            text-align: center;
        }
        p {
            font-family: verdana;
            font-size: 20px;
        }
    </style>
</head>
<body>

<h1>My Budget App</h1>
<p>Welcome to the app that helps you track your expenses.</p>

</body>
</html>

body{ background-color: lightblue; } ：設定整個頁面的背景色為淺藍色。
h1 { color: white; text-align: center; }：將標題的文字顏色設為白色，並居中顯示。
p { font-family: verdana; font-size: 20px; }：將段落文字設定為 verdana 字體，並且字體大小為 20px。

CSS的應用方式

內聯樣式（Inline CSS）：直接在HTML標籤中定義樣式，但大型專案不推薦使用這種方式，因為會很難維護。

<h1 style="color: blue;">Welcome</h1>

內嵌樣式（Internal CSS）：將樣式寫在標籤中，適合用在小型專案。

<style>
  h1 {
      color: blue;
  }
</style>

外部樣式表（External CSS）：將樣式寫在獨立的CSS文件中，這是最推薦的方式，尤其是大專案使用這種方式會更容易維護，可以放在.css的文件中，然後在HTML引用。

<link rel="stylesheet" href="styles.css">

<link>：告訴瀏覽器需要額外資源，並引用。
rel="stylesheet"：rel是link的屬性，表示這個link所連接的資源和文檔的關係。而stylesheet代表需要引用的是一個樣式表。
href="style.css"：href是hyperlink reference的縮寫，指定外部資源的路徑。告訴瀏覽器位置是style.css。這個文件必須和當前的HTML檔在同一個資料夾中。（如果不在同一個資料夾，就要指定正確路徑）

CSS常見的屬性

文字相關
顏色：color: red;
文本大小：font-size: 16px;
字體：font-family: Arial, sans-serif;
粗細：font-weight: bold;
對齊方式：text-align: center;
行間距：line-height: 1.5;
背景相關
顏色：background-color: lightblue;
圖片：background-image: url(’image.jpg’);
圖片大小：background-size: cover;
邊框相關
邊框樣式（寬度、類型和顏色）：border: 1px solid black;
圓角：border-radius: 5px;
尺寸和佈局相關
寬度：width: 100px;
高度：height: 200px;
外邊距：margin: 20px;
內邊距：padding: 15px;
其他
透明度：opacity: 0.5;
陰影：box-shadow: 2px 2px 5px grey;

簡單實踐

透過上面的學習，自己嘗試撰寫一個CSS文件。

body{
    background-color: black;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h1{
    color:aliceblue;
    text-align: center;
    font-weight: bold;
}

p{
    color:antiquewhite;
    font-size: 18px;
    line-height: 1.8;
}

使用連結引用上面的css檔。

<!DOCTYPE html>
<html lang="zh-Hant">
    <head>
        <link rel="stylesheet" href="style.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scal=1.0">
        <title>introduction</title>
    </head>
    <body>
        <h1>新手開發日記：跟著ChatGPT做記帳網頁</h1>
        <p>作為一個程式菜鳥，對於完全沒有經驗的我來說，開發網站既讓人好奇，又因為陌生而感到有些迷茫。不過，時代進步，網路上有很多資源可以讓我們自主學習。這次藉由這個鐵人賽計畫，我會利用 ChatGPT 的協助，嘗試開發一款簡易記帳網頁，並把這段學習的心路歷程記錄下來。</p>
    </body>
</html>

成果展示